<template>
	<view class="page">
		<!-- 固定顶部区域 -->
		<view class="fixed-header">
			<!-- 顶部搜索区域 -->
			<view class="header">
				<view class="search-area">
					<view class="category-tabs">
						<text class="category-item active">Python</text>
						<text class="category-item">Java</text>
					</view>
					<view class="action-buttons">
						<view class="action-btn add-btn">
							<text class="add-icon">+</text>
						</view>
						<view class="action-btn search-btn">
							<text class="search-icon">🔍</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 筛选标签栏 -->
			<view class="filter-tabs">
				<text class="filter-item active">推荐</text>
				<text class="filter-item">附近</text>
				<text class="filter-item">最新</text>
				<view class="filter-item location" @click="showLocationPicker">
					<text>{{ selectedLocation }}</text>
					<text class="triangle-icon">▼</text>
				</view>
				<view class="filter-item filter-btn">
					<text>筛选</text>
					<text class="triangle-icon">▼</text>
				</view>
			</view>
		</view>

		<!-- 职位列表 -->
		<view class="job-list" scroll-y="true" @scrolltolower="loadMore">
			<view class="job-item" v-for="(job, index) in jobList" :key="index" @click="goToJobDetail(job)">
				<view class="job-header">
					<view class="job-title">{{ job.title }}</view>
					<view class="salary">{{ job.salary }}</view>
				</view>
				<view class="company-info">
					<text class="company-name">{{ job.companyName }}</text>
					<text class="company-desc">{{ job.companyDesc }}</text>
					<text class="company-size">{{ job.companySize }}</text>
				</view>
				<view class="job-tags">
					<text class="tag" v-for="(tag, tagIndex) in job.tags" :key="tagIndex">{{ tag }}</text>
				</view>
				<view class="hr-info">
					<view class="hr-left">
						<view class="hr-avatar-container">
							<view class="hr-avatar" :style="{backgroundColor: job.hrColor}"></view>
							<view class="online-dot" v-if="job.isOnline"></view>
						</view>
						<view class="hr-details">
							<view class="hr-name">{{ job.hrName }}</view>
							<view class="hr-reply">{{ job.hrReply }}</view>
						</view>
					</view>
					<view class="job-location">
						<text class="location-text">{{ job.location }}</text>
						<text class="close-btn">×</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 地区选择弹窗 -->
		<view class="location-modal" v-if="showLocationModal" @click="hideLocationPicker">
			<view class="location-modal-content" :class="modalAnimationClass" @click.stop>
				<!-- 头部 -->
				<view class="location-header">
					<view class="close-btn" @click="hideLocationPicker">
						<text class="close-icon">×</text>
					</view>
					<view class="header-content">
						<view class="hot-cities">
							<text class="hot-label">武汉</text>
							<text class="dot-separator">·</text>
							<text class="current-num">{{ selectedAreas.length }}</text>
						</view>
						<view class="filter-cities" @click="switchToAllCities">
							<text class="filter-icon">🏙️</text>
							<text class="filter-text">筛选城市</text>
						</view>
					</view>
				</view>

				<!-- 内容区域 -->
				<view class="location-content">
					<!-- 左侧导航 -->
					<view class="location-nav">
						<view class="nav-item" :class="{active: activeTab === 'business'}" @click="switchTab('business')">
							<text>商圈</text>
						</view>
						<view class="nav-item" :class="{active: activeTab === 'subway'}" @click="switchTab('subway')">
							<text>地铁</text>
						</view>
					</view>

					<!-- 右侧区域列表 -->
					<view class="location-list">
						<!-- 全武汉选项 -->
						<view class="top-options">
							<view class="option-item" @click="selectLocation('全武汉')">
								<text class="option-text">全武汉</text>
							</view>
							<view class="option-item" :class="{highlight: selectedAreas.includes('全洪山区')}" @click="selectLocation('全洪山区')">
								<text class="option-text" :class="{active: selectedAreas.includes('全洪山区')}">全洪山区</text>
							</view>
						</view>

						<!-- 热门商圈标签 -->
						<view class="hot-tag">
							<text class="hot-tag-text">热门商圈</text>
							<view class="hot-icon">全</view>
						</view>

						<!-- 地区列表 -->
						<view class="area-grid">
							<view class="area-row" v-for="(row, rowIndex) in areaRows" :key="rowIndex">
								<view class="area-item" 
									  v-for="(area, areaIndex) in row" 
									  :key="areaIndex" 
									  :class="{selected: selectedAreas.includes(area)}"
									  @click="toggleAreaSelection(area)">
									<text class="area-text">{{ area }}</text>
									<view class="selection-number" v-if="selectedAreas.includes(area)">
										{{ selectedAreas.indexOf(area) + 1 }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部按钮 -->
				<view class="location-footer">
					<view class="footer-btn clear-btn" @click="clearSelection">
						<text class="btn-text">清除</text>
					</view>
					<view class="footer-btn confirm-btn" @click="confirmSelection">
						<text class="btn-text">确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'HomePage',
		data() {
			return {
				// 地区选择相关
				showLocationModal: false,
				// 动画控制
				modalAnimationClass: '',
				selectedLocation: '武汉',
				activeTab: 'business',
				// 已选择的地区列表（支持多选）
				selectedAreas: [],
				areaRows: [
					['关山', '光谷'],
					['江夏区', '洪山区'],
					['东西湖区', '流芳'],
					['汉阳区', '光谷东'],
					['武昌区', '花山'],
					['黄陂区', '纸坊'],
					['江汉区', '常青'],
					['江岸区', '庙岭镇'],
					['蔡甸区', '中北路'],
					['硚口区', '珞狮南路'],
					['青山区', '汉口']
				],
				jobList: [
					{
						title: 'java开发工程师',
						salary: '15-18K',
						companyName: '联创世界',
						companyDesc: '不需要融资',
						companySize: '100-499人',
						tags: ['3-5年', '本科', 'Java', 'Spring', 'SpringCloud'],
						hrColor: '#ff9999',
						isOnline: true,
						hrName: '白女士 · 招聘专员',
						hrReply: '今日回复10+次',
						location: '公交47分钟 洪山区 关山'
					},
					{
						title: '高级Java工程师',
						salary: '13-18K',
						companyName: '时代地智',
						companyDesc: '不需要融资',
						companySize: '100-499人',
						tags: ['5-10年', '本科', 'SpringCloud', 'MySQL'],
						hrColor: '#99ccff',
						isOnline: false,
						hrName: '王先生 · HR',
						hrReply: '今日回复6次',
						location: '2.4km 江夏区 光谷'
					},
					{
						title: 'java开发',
						salary: '14-15K',
						companyName: '翙智科技',
						companyDesc: '',
						companySize: '0-20人',
						tags: ['5-10年', '本科', 'Java', 'Spring', 'MyBatis'],
						hrColor: '#ffcc99',
						isOnline: true,
						hrName: '王女士 · 人力资源招…',
						hrReply: '今日回复10+次',
						location: '地铁62分钟 武昌区 中北路'
					},
					{
						title: '资深java开发工程师',
						salary: '15-30K',
						companyName: '轮回科技',
						companyDesc: '未融资',
						companySize: '20-99人',
						tags: ['5-10年', '本科', 'Java', 'Spring', 'Redis'],
						hrColor: '#ccffcc',
						isOnline: false,
						hrName: '李女士 · HR',
						hrReply: '今日回复8次',
						location: '地铁35分钟 武昌区 中南路'
					}
				]
			}
		},
		computed: {},
		onLoad() {
			console.log('首页加载')
			// 设置消息数量红点
			uni.setTabBarBadge({
				index: 2, // 消息标签的索引
				text: '2'
			})
		},
		onShow() {
			console.log('首页显示')
		},
		onPullDownRefresh() {
			// 下拉刷新
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			goToJobDetail(job) {
				console.log('点击职位:', job.title)
				uni.navigateTo({
					url: '/pages/jobs/detail'
				})
			},
			loadMore() {
				console.log('加载更多')
				// 加载更多数据的逻辑
			},
			// 地区选择相关方法
			showLocationPicker() {
				this.modalAnimationClass = 'slide-up'
				this.showLocationModal = true
			},
			hideLocationPicker() {
				this.modalAnimationClass = 'slide-down'
				// 等待动画完成后隐藏弹窗
				setTimeout(() => {
					this.showLocationModal = false
					this.modalAnimationClass = ''
				}, 300)
			},
			switchTab(tab) {
				this.activeTab = tab
				if (tab === 'subway') {
					// 切换到地铁数据
					this.areaRows = [
						['1号线', '2号线'],
						['3号线', '4号线'],
						['6号线', '7号线'],
						['8号线', '11号线'],
						['16号线', '阳逻线']
					]
				} else {
					// 切换到商圈数据
					this.areaRows = [
						['关山', '光谷'],
						['江夏区', '洪山区'],
						['东西湖区', '流芳'],
						['汉阳区', '光谷东'],
						['武昌区', '花山'],
						['黄陂区', '纸坊'],
						['江汉区', '常青'],
						['江岸区', '庙岭镇'],
						['蔡甸区', '中北路'],
						['硚口区', '珞狮南路'],
						['青山区', '汉口']
					]
				}
			},
			switchToAllCities() {
				console.log('切换到全城市选择')
				// 这里可以跳转到城市选择页面或切换到城市列表
			},
			selectLocation(location) {
				this.selectedLocation = location
				console.log('选择地区:', location)
			},
			// 切换地区选择状态（支持多选）
			toggleAreaSelection(area) {
				const index = this.selectedAreas.indexOf(area)
				if (index > -1) {
					// 如果已选中，则取消选择
					this.selectedAreas.splice(index, 1)
				} else {
					// 如果未选中，则添加到选择列表
					this.selectedAreas.push(area)
				}
				console.log('当前选择:', this.selectedAreas)
			},
			clearSelection() {
				this.selectedAreas = []
				console.log('清除选择')
			},
			confirmSelection() {
				// 先播放关闭动画
				this.modalAnimationClass = 'slide-down'
				
				// 等待动画完成后关闭弹窗
				setTimeout(() => {
					this.showLocationModal = false
					this.modalAnimationClass = ''
					
					// 更新显示的地区文本
					if (this.selectedAreas.length > 0) {
						this.selectedLocation = this.selectedAreas.length === 1 ? this.selectedAreas[0] : `${this.selectedAreas.length}个地区`
					} else {
						this.selectedLocation = '武汉'
					}
					console.log('确认选择:', this.selectedAreas)
				}, 300)
				// 这里可以执行搜索或其他逻辑
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 固定顶部容器 */
	.fixed-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	/* 顶部搜索区域 */
	.header {
		background: linear-gradient(180deg, #74d4e8 0%, #e8f4f8 70%, #ffffff 100%);
		padding: 20rpx 30rpx;
		padding-top: calc(var(--status-bar-height, 44px) + 20rpx);
		padding-bottom: 30rpx;
	}

	.search-area {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.category-tabs {
		display: flex;
		gap: 20rpx;
	}

	.category-item {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		
		&.active {
			color: #000;
		}
	}

	.action-buttons {
		display: flex;
		gap: 24rpx;
		align-items: center;
	}

	.action-btn {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10rpx);
	}

	.add-icon,
	.search-icon {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	/* 筛选标签栏 */
	.filter-tabs {
		background-color: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		gap: 40rpx;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}

	.filter-item {
		font-size: 28rpx;
		color: #666;
		
		&.active {
			color: #000;
			font-weight: 500;
		}
		
		&.location,
		&.filter-btn {
			background-color: #f0f0f0;
			border-radius: 10rpx;
			padding: 8rpx 16rpx;
			display: flex;
			align-items: center;
			gap: 8rpx;
			position: relative;
		}
		
		&.location {
			margin-left: auto;
			margin-right: 20rpx;
		}
	}
	
	.triangle-icon {
		font-size: 20rpx;
		color: #999;
		transform: scale(0.8);
	}

	/* 职位列表 */
	.job-list {
		flex: 1;
		padding: 0 30rpx;
		margin-top: calc(var(--status-bar-height, 44px) + 205rpx); /* 为固定头部留出空间 */
		padding-bottom: 40rpx;
	}

	.job-item {
		background-color: #fff;
		margin: 20rpx 0;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		
		&:first-child {
			margin-top: 20rpx;
		}
	}

	.job-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.job-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #000;
		line-height: 1.4;
		flex: 1;
		margin-right: 20rpx;
	}

	.salary {
		font-size: 32rpx;
		font-weight: 600;
		color: #00bcd4;
	}

	.company-info {
		display: flex;
		gap: 20rpx;
		margin-bottom: 24rpx;
		align-items: center;
		flex-wrap: wrap;
	}

	.company-name {
		font-size: 24rpx;
		color: #666;
	}

	.company-desc {
		font-size: 24rpx;
		color: #666;
	}

	.company-size {
		font-size: 24rpx;
		color: #666;
	}

	.job-tags {
		display: flex;
		gap: 16rpx;
		margin-bottom: 24rpx;
		flex-wrap: wrap;
	}

	.tag {
		padding: 8rpx 16rpx;
		background-color: #f0f0f0;
		color: #666;
		font-size: 22rpx;
		border-radius: 8rpx;
	}

	.hr-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.hr-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.hr-avatar-container {
		position: relative;
	}

	.hr-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #ddd;
	}

	.online-dot {
		position: absolute;
		bottom: 2rpx;
		right: 2rpx;
		width: 20rpx;
		height: 20rpx;
		background-color: #4CAF50;
		border-radius: 50%;
		border: 2rpx solid #fff;
	}

	.hr-details {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.hr-name {
		font-size: 24rpx;
		color: #666;
	}

	.hr-reply {
		font-size: 22rpx;
		color: #999;
	}

	.job-location {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.location-text {
		font-size: 22rpx;
		color: #999;
	}

	.close-btn {
		font-size: 32rpx;
		color: #ccc;
		padding: 0 10rpx;
	}
	
	/* 地区选择弹窗样式 */
	.location-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: flex-end;
	}
	
	.location-modal-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	
	/* 动画样式 */
	.slide-up {
		animation: slideUp 0.3s ease-out;
	}
	
	.slide-down {
		animation: slideDown 0.3s ease-in;
	}
	
	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}
	
	@keyframes slideDown {
		from {
			transform: translateY(0);
		}
		to {
			transform: translateY(100%);
		}
	}
	
	/* 弹窗头部 */
	.location-header {
		padding: 30rpx;
		padding-top: calc(var(--status-bar-height, 44px) + 30rpx);
		border-bottom: 1rpx solid #eee;
		position: relative;
	}
	
	.location-header .close-btn {
		position: absolute;
		top: calc(var(--status-bar-height, 44px) + 30rpx);
		left: 30rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
	
	.close-icon {
		font-size: 40rpx;
		color: #333;
		font-weight: 300;
	}
	
	.header-content {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 60rpx;
	}
	
	.hot-cities {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.hot-label {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}
	
	.dot-separator {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin: 0 8rpx;
	}
	
	.current-num {
		font-size: 36rpx;
		font-weight: 600;
		color: #00bcd4;
	}
	
	.filter-cities {
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		background-color: #f5f5f5;
	}
	
	.filter-icon {
		font-size: 24rpx;
	}
	
	.filter-text {
		font-size: 28rpx;
		color: #00bcd4;
	}
	
	/* 内容区域 */
	.location-content {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	
	/* 左侧导航 */
	.location-nav {
		width: 160rpx;
		background-color: #f8f9fa;
		display: flex;
		flex-direction: column;
	}
	
	.nav-item {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #666;
		border-bottom: 1rpx solid #eee;
		position: relative;
	
		&.active {
			background-color: #fff;
			color: #333;
			font-weight: 500;
	
			&::after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 40rpx;
				background-color: #00bcd4;
				border-radius: 0 6rpx 6rpx 0;
			}
		}
	}
	
	/* 右侧列表 */
	.location-list {
		flex: 1;
		padding: 30rpx;
		overflow-y: auto;
	}
	
	/* 顶部选项 */
	.top-options {
		display: flex;
		gap: 40rpx;
		margin-bottom: 40rpx;
	}
	
	.option-item {
		padding: 16rpx 32rpx;
		border-radius: 50rpx;
		border: 2rpx solid #eee;
		display: flex;
		align-items: center;
		justify-content: center;
	
		&.highlight {
			background-color: #e8f4f8;
			border-color: #00bcd4;
		}
	}
	
	.option-text {
		font-size: 28rpx;
		color: #333;
	
		&.active {
			color: #00bcd4;
			font-weight: 500;
		}
	}
	
	/* 热门标签 */
	.hot-tag {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.hot-tag-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	.hot-icon {
		width: 40rpx;
		height: 40rpx;
		background-color: #00bcd4;
		color: #fff;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		font-weight: 600;
	}
	
	/* 地区网格 */
	.area-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	
	.area-row {
		display: flex;
		width: 100%;
	}
	
	.area-item {
		flex: 1;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #f0f0f0;
		border-right: 1rpx solid #f0f0f0;
		position: relative;
	
		&:last-child {
			border-right: none;
		}
	
		&:active {
			background-color: #f5f5f5;
		}
	
		&.selected {
			background-color: #e8f4f8;
			border-color: #00bcd4;
						
			.area-text {
				color: #00bcd4;
				font-weight: 500;
			}
		}
	}
	
	.area-text {
		font-size: 28rpx;
		color: #333;
	}
	
	/* 选择序号 */
	.selection-number {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 32rpx;
		height: 32rpx;
		background-color: #00bcd4;
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		font-weight: 600;
		min-width: 32rpx;
	}
	
	/* 底部按钮 */
	.location-footer {
		padding: 30rpx;
		border-top: 1rpx solid #eee;
		display: flex;
		gap: 30rpx;
		background-color: #fff;
	}
	
	.footer-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 500;
	
		&.clear-btn {
			background-color: #f5f5f5;
			color: #666;
		}
	
		&.confirm-btn {
			background: linear-gradient(90deg, #00bcd4 0%, #26c6da 100%);
			color: #fff;
		}
	}
	
	.btn-text {
		font-size: 32rpx;
	}
</style>